<!-- 页面总布局 -->
<template>
  <div class="home">
    <el-container>
      <!-- 侧边菜单 -->
      <el-aside width="210px">
        <myaside></myaside>
      </el-aside>
      <el-container>
        <!-- 头部 -->
        <el-header>
            <strong class="titleName">拾玖后台管理系统</strong>
          <myheader></myheader>
        </el-header>

        <!-- 主体页面 -->
        <el-main>
          <mytabs></mytabs>
          <div class="main" style="margin: 0 15px">
            <router-view></router-view>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
//引入页面布局组件
import myheader from "./inc/Header.vue";
import myaside from "./inc/SideMenu.vue";
import mytabs from "./inc/Tabs.vue";
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    name: "Home",
    myheader: myheader,
    myaside: myaside,
    mytabs: mytabs,
  },
  data() {
    //这里存放数据
    return {};
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {},
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  //3.0版本弃用 beforeDestroy() {}, //生命周期 - 销毁之前
  //3.0版本弃用 destroyed() {}, //生命周期 - 销毁完成
  beforeUnmount() {}, //生命周期 - 销毁之前
  unmounted() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
.el-container {
  padding: 0;
  margin: 0;
  height: 100vh;
  
}
.titleName{
  font-size: 20px;
  color: #56585a;
}
.el-header {
  background-color: #1AB394;
  color: #333;
  text-align: center;
  line-height: 60px;
  padding: 0px;
}

.el-aside {
  color: #333;
  line-height: 200px;
  padding: 0px;
}

.el-main {
  color: #333;
  /* text-align: center; */
  padding: 0px;
  margin: 0px;
}
.main{
  margin: 0px;
}

a {
  text-decoration: none;
}
</style>